<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css">
	<!-- Theme style -->
	<link rel="stylesheet" href="../../../adminlte/dist/css/AdminLTE.min.css">
	<link rel="stylesheet" href="../../../layui/css/layui.css">
	<link rel="stylesheet" href="../../../css/byking.css">
	<link rel="stylesheet" href="../../../adminlte/dist/css/skins/_all-skins.min.css">
</head>
<body>
	<div class="byking-form" id="addrole">
		<form class="layui-form" action="" onsubmit="return false;">
		
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:90px">角色名称</label>
				<div class="layui-input-block">
					<input type="text" name="role_name" required lay-verify="required"
						placeholder="请输入角色" autocomplete="off" class="layui-input">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label" style="width:90px">角色信息</label>
				<div class="layui-input-block">
					<input type="text" name="role_info" required lay-verify="required"
						placeholder="请输入角色信息" autocomplete="off" class="layui-input">
				</div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:90px">状态</label>
				    <div class="layui-input-block">
				      <select name="status" lay-verify="required">
				        <option value="1">禁用</option>
				        <option value="0" selected>启用</option>
				      </select>
				    </div>
			</div>
			
			<div class="layui-form-item">
				<label class="layui-form-label" style="width:90px">部门</label>
				<div class="layui-input-block">
					<button class="layui-btn layui-btn-normal layui-btn-radius" @click="showDeptList()">添加部门</button>
				</div>
			</div>
			
			<div class="layui-form-item" v-if="departmentlist!=null">
			    <label class="layui-form-label"></label>
			    <div class="byking-box-inline">
			    	<div class="byking-box" v-for="(index, item) in departmentlist">
				    	<div class="byking-box-info">
				    		<div class="byking-box-img"><i class="fa fa-users"></i></div>
				    		<div class="byking-box-text"><font>{{item.name}}</font></div>
				    		<div class="byking-box-button">
					    		<button class="fa fa-times" @click=delDep(index)></button>
							</div>
	          			</div>
			    	</div>
			    </div>
			  </div>

			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn " lay-submit lay-filter="formDemo">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>

	<!-- jQuery -->
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<!-- jquery.cookie -->
	<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
	<!-- layer -->
	<script src="https://cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
	<!-- vue -->
	<script src="http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js"></script>
	<script src="../../../layui/layui.js"></script>
	<script src="../../../js/byking.js"></script>
	<script src="../../../js/hostconfig.js"></script>

	<script>
	var top_dep_guid = $byking.getUrlParam("top_dep_guid");
	
	var addrole = new Vue({
        el: "#addrole",
        data: {
        	departmentlist: null
        },
        methods: {
        	showDeptList: function() {
        		var title = "归属部门";
    			var url = "choosedepartment.html?top_dep_guid="+top_dep_guid;
    			var area = ["300px", "300px"];
    			$byking.showModal(title,url,area);
        		return false;
        	},
        	delDep: function(index){
        		addrole.departmentlist.splice(index, 1);
        		return false;
        	}
        }
    });
	
	function setDepartment(list){
		addrole.departmentlist = list;
	}
	
	var submitflag = true;
	layui.use('form', function() {
		var form = layui.form();
		//监听提交
		form.on('submit(formDemo)', function(data) {
			$(".layui-btn:first").attr("disabled","disabled");
			var data = data.field;
			if(!submitflag){
				return false;
			}
			var list = addrole.departmentlist;
			if(list == null || list.length == 0) {
				layer.msg("必须选择部门，才能提交！", {icon:5});
				$(".layui-btn:first").removeAttr("disabled"); 
				submitflag = true;
				return false;
			}
			
			var depGuids = [];
			
			for(var i = 0 ; i < list.length ;i++) {
				depGuids.push(list[i].guid);
			}
			//layer.msg(JSON.stringify(dep_guid));
			submitflag = false;
			var url = $hostconfig.sysAuthHost+"/role/add";
			data.creator_by = $byking.getCookieValue("user_guid");
			data.user_guid = $byking.getCookieValue("user_guid");
			data.top_dep_guid = top_dep_guid;
			data.depGuids = depGuids;
			$byking.postJSONWithToken(url,data,function(data){
				layer.msg("新增成功");
				var index = parent.layer.getFrameIndex(window.name);
				parent.refrehRole();
				parent.layer.close(index);
			},function(data){
				submitflag = true;
				$(".layui-btn:first").removeAttr("disabled"); 
				layer.msg(data.responseJSON.message, {icon:5});
			});
			return false;
		});
	});
	</script>
</body>
</html>